<template>
  <div class="container">
    <div class="left-nav">
      <div class="logo">
        <img src="@/assets/logo.png">
      </div>
      <div class="nav-item" @click="to_path('tts',1)">
        <div class="nav-item-icon">
          <img v-show="active!=1" src="@/assets/icon/tts-icon.png">
          <img v-show="active==1" src="@/assets/icon/tts-icon-active.png">
        </div>
        <p :class="active == 1 ? 'p-active':''" >文案配音</p>
      </div>
      <div class="nav-item" @click="to_path('dg_human',2)">
        <div class="nav-item-icon">
          <img v-show="active!=2" src="@/assets/icon/math-p.png">
          <img v-show="active==2" src="@/assets/icon/math-p-active.png">
        </div>
        <p :class="active == 2 ? 'p-active':''" >数字人</p>
      </div>

    </div>
    <div class="main-right">
      <router-view/>
    </div>

  </div>
</template>
<script setup>
import {ref} from 'vue'
import router from "@/router/index.js";


const active = ref(1)


const to_path = (path,index) => {
  router.push(path)
  active.value = index
}


</script>
<style scoped>
.container {
  height: 100vh;
  width: 100vw;
  display: flex;
}
img {
  width: 100%;
  height: 100%;
}
.logo {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.left-nav {
  width: 80px;
  height: 100%;
  background-color: #fff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-right: 1px #f6f6f6 solid;
}

.nav-item {
  cursor: pointer;
  margin-bottom: 20px;
}

.nav-item-icon {
  width: 30px;
  height: 30px;
  margin: 0 auto;
}

.nav-item-icon img {
  width: 100%;
  height: 100%;
}

.nav-item p {
  font-size: 12px;
}

.p-active{
  color: #25a3e4;
}

.main-right{
  width: calc(100% - 80px);
  height: 100%;
  background-color: #f6f6f6;
}
</style>